<template>
  <f7-list media-list>
    <f7-list-item
      link="#"
      :title="item.name?item.name:item.songListName"
      :subtitle="item.sharedTime?item.sharedTime:item.createDate"
      :text="from==='shared'?item.description:(from==='songCard'?'':'写点什么吧...')"
      @click="goToSongListDetail(item, index)"
      v-for="(item, index) in songList"
      :key="index"
    >
      <img
        slot="media"
        :src="item.coverUrl?item.coverUrl:'/static/song_list_cover.jpg'"
        width="80"
        height="80"
        class="lazy lazy-fade-in song-lazy"
        @lazy:load="handleLoad()"
      />
      <img v-if="from==='shared' || from==='toShare'"
        slot="after"
        :src="from==='shared'?(item.headerImgUrl?item.headerImgUrl:'/static/user_header.jpg'):getUserInfo.headerImgUrl?getUserInfo.headerImgUrl:'static/user_header.jpg'"
        class="lazy lazy-fade-in song-lazy user_avatar"
      />
    </f7-list-item>
  </f7-list>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
    }),
  },
  props: {
    songList: {
      type: Array,
      default: () => {
        return []
      },
    },
    from: {
      type: String,
      default: '',
    },
  },
  methods: {
    goToSongListDetail(item, index) {
      let self = this
      let listHeight = '54vh'
      if (this.from === 'favorite' || this.from === 'songCard' || this.from==='shared') {
        listHeight = '68vh'
      }
      this.$f7ready((f7) => {
        f7.views.main.router.navigate('/songListDetail/', {
          props: {
            songListItem: item,
            from: self.from,
            index: index,
            listHeight: listHeight,
          },
        })
      })
    },
    handleLoad(){
      console.log('img load.................')
    },
    forceLoad(){
      $('img.lazy').trigger('lazy')
      // let loadDom = $('.lazy.song-lazy');
      // loadDom.forEach(item=>{
      //   item.trigger('lazy');
      // })
    }
  },
  mounted(){
    // this.forceLoad()
  }
}
</script>
<style lang="scss" scoped>
.light{
  $spanColor: #212121;
  $spanSubColor: #666666;
  $backgroundSubColor: #d4c3c3;
  .list.media-list /deep/ ul{
    background-color: $backgroundSubColor;
    .item-title{
      color:$spanColor
    }
    .item-subtitle{
      color:$spanSubColor
    }
    .item-text{
      color:$spanSubColor
    }
    
  }
}
.dark{
  $spanColor: #ffffff;
  $spanSubColor: #f0f0f0;
  $backgroundSubColor: #592e2e;
  .list.media-list /deep/ ul{
    background-color: $backgroundSubColor;
    .item-title{
      color:$spanColor
    }
    .item-subtitle{
      color:$spanSubColor
    }
    .item-text{
      color:$spanSubColor
    }
  }
}
.user_avatar {
  border-radius: 50%;
  width: 0.2rem;
  height: 0.2rem;
}
</style>
